<template>
  <div class="container">
    <span class="s1" v-if="val == 1">已缴费</span>
    <el-switch
      v-model="val"
      active-color="#0000ff"
      inactive-color="#dddddd"
      :active-value="1"
      :inactive-value="2"
      disabled
    >
    </el-switch>
    <span class="s2" v-if="val == 2||val == null">未缴费</span>
  </div>
</template>

<script>
export default {
  name: "PaySwitch",
  data() {
    return {
      value: "",
    };
  },
  props: {
    val: {
      // type: [Number], // 根据你的需要选择合适的类型
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.container::v-deep {
  position: relative;
  .el-switch__core {
    position: relative;
    width: 66px !important;
    opacity: 0.5;
    z-index: 55;
  }
  .s1 {
    color: #fff;
    left: 7px;
    position: absolute;
    z-index: 50;
  }
  .s2 {
    color: #fff;
    left: 19px;
    position: absolute;
    z-index: 51;
  }
  // .el-switch {
  //   .el-switch__label:nth-child(2) {
  //     margin-right: -43px !important;
  //     font-size: 12px;
  //     color: #ffffff;
  //     z-index: 50;
  //   }
  //   .el-switch__label:nth-child(4) {
  //     margin-left: -62px !important;
  //     font-size: 12px;
  //     color: #ffffff;
  //     z-index: 51;
  //   }
  // }
}
</style>